<template>
  <el-breadcrumb
    separator="/"
    class="breakcrumb-box"
    separator-class="el-icon-arrow-right"
  >
    <!-- <el-breadcrumb-item :to="item.path" v-for="item in matchedList" :key="item.path">{{
      item.meta.title
    }}</el-breadcrumb-item> -->
    <el-breadcrumb-item v-for="(item, index) in data.matchedList" :key="item.path">
      <a
        :href="item.path"
        class="breadcrumb-item"
        :class="{ 'last-item': index == data.matchedList.length-1 }"
        >{{ item.meta.title }}</a
      >
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script>
import { computed, reactive,watch } from "vue";
import { useRoute } from "vue-router";
export default {
  name: "BreakCroumb",
  setup(){
    let $route = useRoute()
    let data = reactive({
      list: $route.matched
    })      
    data.matchedList = computed(()=>{
      return data.list.slice(1, data.list.length);
    })
    watch(()=>$route, (newValue)=>{
      console.log('路由发生变化',newValue)
      data.list = newValue.matched
      // console.log(to)
    },{immediate:true,deep:true})
    return {
      $route,
      data
    }
  },
};
</script>
<style lang="scss" scoped>
.el-breadcrumb{
    font-size: 18px;
}
.breakcrumb-box {
  margin-top: 2px;
  padding: 8px;
  display: flex;
  align-items: center;
  background: #fff;
  .breadcrumb-item{
        height: 24px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 24px;
        color: #334762;
        opacity: 1;
  }
  .last-item {   
    font-size: 16px !important;
    line-height: 21px !important;
    color: #8284fa !important;
  }
}
</style>